<template>
  <el-form-item v-if="attributes.isHidden ? !attributes.isHidden() : true" :class="attributes?.customClassName?.formItemClassName ?? ''"
                v-bind="attributes.formItem">
    <template
        v-for="item in attributes?.formItem?.slotScope ?? []"
        :key="item.slotName"
        v-slot:[item.slotName]="scope">
      <component :is="item.render(scope)"/>
    </template>
    <el-select
        :key="selectKey"
        v-model="selectValue"
        :class="attributes?.customClassName?.elModelClassName ?? ''"
        :clear-icon="clearIcon"
        
        v-bind="attributes.elModel">
		<!-- :suffix-icon="downselects" -->
      <template
          v-for="item in attributes?.elModel?.slotScope ?? []"
          :key="item.slotName"
          v-slot:[item.slotName]="scope">
        <slot :name="item.slotName"></slot>
        <component :is="item.render(scope)"/>
      </template>
      <div v-infinite-scroll="attributes?.infinite?.infiniteFn ?? infiniteEmptyFn" v-bind="attributes.infinite">
        <el-option
            v-for="item in typeof attributes.elOption.options === 'function'? attributes.elOption.options() : attributes.elOption.options "
            :key="item[attributes?.elModel?.props?.value ?? 'value']"
            :class="item?.className?item.className:''"
            :label="item[attributes?.elModel?.props?.label ?? 'label']" :value="item[attributes?.elModel?.props?.value ?? 'value']"
            v-bind="item"/>
      </div>
    </el-select>
  </el-form-item>
</template>
<script setup>
import {computed, ref, watch,h} from 'vue'
import close from "@/assets/images/icon-close.png";
const props = defineProps({
  value: {
    type: [String, Number, Boolean, Date, Array],
    required: true
  },
  attributes: {
    type: Object,
    default: () => ({})
  }
})
 const  clearIcon = ()=>{
        return h('img',{
            src:close,
            style:{
                width:"16px",
                height:"16px"
            }
        })
    }
	
const emit = defineEmits(['push-val'])
const selectKey = ref(+new Date())
const selectValue = computed({
  get() {

    return props.value
  },
  set(val) {
    emit('push-val', val)
  }
})
watch(
    () => selectValue.value,
    (val, bef) => {
      if (typeof val !== typeof bef) {
        selectKey.value = +new Date()
      }
    }
)
const infiniteEmptyFn = () => ({})
</script>
<style lang="scss" scoped>
:deep(.el-select__caret) {
  font-size: 16px !important;
  color: #000 !important;
}

.hidden-options {
  display: none;
}
</style>